<!-- 二维码管理 -->
<template>
    <!-- 搜索工作栏 -->
    <ContentWrap>
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="100px">
            <el-form-item label="二维码名称">
                <el-input v-model="queryParams.codeName" class="!w-240px" clearable placeholder="请输入二维码名称"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon class="mr-5px" icon="ep:search" />
                    搜索
                </el-button>
                <el-button @click="resetQuery">
                    <Icon class="mr-5px" icon="ep:refresh" />
                    重置
                </el-button>
                <el-button v-hasPermi="['qrcode:create']" plain type="primary" @click="openForm(undefined)">
                    <Icon class="mr-5px" icon="ep:plus" />
                    新增
                </el-button>
                <!-- <el-button v-hasPermi="['product:spu:export']" :loading="exportLoading" plain type="success"
                    @click="handleExport">
                    <Icon class="mr-5px" icon="ep:download" />
                    导出
                </el-button> -->
            </el-form-item>
        </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
        <el-table v-loading="loading" :data="list">
            <el-table-column label="二维码编号" prop="id" />
            <el-table-column align="center" label="二维码图片" prop="codeUrl" width="100px">
                <template #default="scope">
                    <img :src="scope.row.codeUrl" style="width: 40px" />
                </template>
            </el-table-column>
            <el-table-column label="二维码名称" prop="codeName" show-overflow-tooltip />
            <el-table-column label="服务小区地址" prop="addressDetail" show-overflow-tooltip />
            <el-table-column label="群管理员" prop="groupAdmin" show-overflow-tooltip />
            <el-table-column label="群管理员联系方式" prop="groupPhone" show-overflow-tooltip />

            <el-table-column :formatter="dateFormatter" align="center" label="创建时间" prop="createTime" width="180" show-overflow-tooltip />
            <el-table-column align="center" fixed="right" label="操作" min-width="200">
                <template #default="{ row }">
                    <el-button link type="primary" @click="openDetail(row.id)"> 详情 </el-button>
                    <el-button v-hasPermi="['qrcode:update']" link type="primary" @click="openForm(row.id)">
                        修改
                    </el-button>
                    <el-button v-hasPermi="['qrcode:delete']" link type="danger" @click="handleDelete(row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
            @pagination="getList" />
    </ContentWrap>
</template>
<script lang="ts" setup>
import { TabsPaneContext } from 'element-plus'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as QrcodeApi from '@/api/system/qrcode'

defineOptions({ name: 'Qrcode' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转

const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<QrcodeApi.Qrcode[]>([]) // 列表的数据

const queryParams = ref({
    pageNo: 1,
    pageSize: 10,
    codeName: ''
}) // 查询参数
const queryFormRef = ref() // 搜索的表单Ref

/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await QrcodeApi.getQrcodeList(queryParams.value)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
    try {
        // 删除的二次确认
        await message.delConfirm()
        // 发起删除
        await QrcodeApi.deleteQrcode(id)
        message.success(t('common.delSuccess'))
        // 刷新列表
        await getList()
    } catch { }
}

/** 搜索按钮操作 */
const handleQuery = () => {
    getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}

/** 新增或修改 */
const openForm = (id?: number) => {
    // 修改
    if (typeof id === 'number') {
        push({ name: 'QrcodeEdit', params: { id } })
        return
    }
    // 新增
    push({ name: 'QrcodeAdd' })
}

/** 查看二维码详情 */
const openDetail = (id: number) => {
    push({ name: 'QrcodeDetail', params: { id } })
}


/** 激活时 */
onActivated(() => {
    getList()
})

/** 初始化 **/
onMounted(async () => {
    await getList()
})
</script>
